<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Publish</title>
	<{include file="system/header.tpl"}>
	<script src="<{'static/js/template.js'|url}>"></script>
	<style>
	#tools {}
	#tools li {line-height: 300%}
	.table>thead>tr>th {text-align: center;vertical-align: middle;}
	ins {	background-color: #cfc;	text-decoration: none;}
	del {	color: #999;	background-color:#FEC8C8;}
	</style>
</head>
<body>
<{include file="system/nav.tpl"}>

<div class="container" role="main">
	<div class="page-header">
		<h4>文件列表：<small><{$_data.url|escape}></small></h4>
	</div>
	<form role="form" method="POST" action="" id="form">
		<input type="hidden" name="url" value="<{$_data.url|escape}>">
		<input type="hidden" name="secret" value="<{$_data.secret|encrypt|escape}>">
		<input type="hidden" name="encode" value="true">
	</form>
	<p data-toggle="buttons"><label class="btn btn-default" ><input type="checkbox" id="checkAll" autocomplete="off" /> 全选 </label></p>
</div>
<div class="container" id="list">
	
</div>
<script id="template" type="text/html">
{{each data as list path}}
<div class="panel panel-default">
	<div class="panel-heading">{{path}}</div>
	<table class="table  table-bordered table-hover table-condensed">
		<thead class="text-center">
			<tr>
				<th rowspan="2"># </th>
				<th rowspan="2">文件路径</th>
				<th rowspan="2">属性</th>
				<th colspan="2">类型</th>
				<th colspan="2">大小</th>
				<th rowspan="2">操作</th>
			</tr>
			<tr>
				<th>本地</th>
				<th>远程</th>
				<th>本地</th>
				<th>远程</th>
			</tr>
		</thead>
		<tbody>
			{{each list}}
			<tr class="{{if ($value['local'] && $value['local']['warning']) || ($value['remote'] && $value['remote']['warning']) }}bg-info{{/if}}">
			<td>{{if ($value['local'] && $value['local']['warning']) || ($value['remote'] && $value['remote']['warning']) }}{{else}}<input type="checkbox" name="{{if $value.local}}upload{{else if $value.remote}}delete{{/if}}[]" value="{{$value.path}}" />{{/if}}</td>
			<td>{{$index}}</td>
			<td class="text-center">
				{{if $value.local && $value.remote}}
				<span class="label label-primary">更新</span>
				{{else if $value.local}}
				<span class="label label-warning">远程无</span>
				{{else if $value.remote}}
				<span class="label label-danger">本地无</span>
				{{/if}}
			</td>
			<td>{{if $value.local}}{{$value.local.type}}{{/if}}</td>
			<td>{{if $value.remote}}{{$value.remote.type}}{{/if}}</td>
			<td>{{if $value.local}}{{$value.local.size}}{{/if}}</td>
			<td>{{if $value.remote}}{{$value.remote.size}}{{/if}}</td>
			<td class="text-right">
				{{if $value.local && $value.remote}}
				<a href="<{'publish/remote_query'|url}>?method=get_file&file={{$value.path}}" name="compare" method="POST" selector="#form"><i class="glyphicon glyphicon-transfer"></i> 对比</a>
				{{if !$value.local.warning && !$value.remote.warning}} | <a href="<{'publish/remote_query'|url}>?method=upload_file&file[]={{$value.path}}" confirm="您确定更新上传[{{$index}}]吗？" name="update" method="POST" selector="#form"><i class="glyphicon glyphicon-upload"></i> 更新</a>{{/if}}
				{{else if $value.local}}
				<a href="<{'publish/remote_query'|url}>?method=upload_file&file={{$value.path}}" confirm="您确定在远程服务器上新建[{{$index}}]吗？" name="create" method="POST" selector="#form"><i class="glyphicon glyphicon-file"></i> 新建</a>
				{{else if $value.remote}}
				{{if !$value.remote.warning}}
				<a href="<{'publish/remote_query'|url}>?method=delete_file&file={{$value.path}}" confirm="您确定在远程服务器上删除[{{$index}}]吗？" name="delete" method="POST" selector="#form"><i class="glyphicon glyphicon-trash"></i> 删除远程</a>
				{{else}}
				<a href="<{'publish/remote_query'|url}>?method=get_file&file={{$value.path}}" name="compare" method="POST" selector="#form">浏览</a>
				{{/if}}
				{{/if}}

			</td>
			</tr>
			{{/each}}
		</tbody>
	</table>
	</div>
</div>
{{/each}}
</script>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal1Label" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="myModal1Label">文件对比 - <span id="file1"></span></h4>
			</div>
			<div class="modal-body">
				<ul class="nav nav-tabs" role="tablist">
					<li class="active"><a href="#compare1" role="tab" data-toggle="tab">对比</a></li>
					<li><a href="#local1" role="tab" data-toggle="tab">本地</a></li>
					<li><a href="#remote1" role="tab" data-toggle="tab">远程</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active in fade" id="compare1">
						<pre><code id="content1"></code></pre>
					</div>
					<div class="tab-pane in fade" id="local1">
						<pre><code id="content2"></code></pre>
					</div>
					<div class="tab-pane in fade" id="remote1">
						<pre><code id="content3"></code></pre>
					</div>
				</div>
			</div>
			<div class="modal-footer">
			<label><input type="checkbox" id="readme1" />我已详细阅读两者区别</label> 
				<button type="button" class="btn btn-danger" disabled="disabled" data-dismiss="modal">上传更新</button>
				<button type="button" class="btn btn-primary" disabled="disabled" data-dismiss="modal">删除远程</button>
			</div>
		</div>
	</div>
</div>
<{include file="system/footer.tpl"}>
<script type="text/javascript">
(function($){
	$().ready(function(){
		$('li.nav-publish','#navigation').addClass('active');
		$('form').query();
		$('#readme1').on('click change',function(){
			$(this).parent().siblings('button').prop('disabled', !this.checked);
		});
		$.POST('<{'publish/remote_query'|url}>?method=get_files', $('#form').serialize(), function(json){
				if (json.result == 'success')
				{
					var html = template('template', json);
					$('#list').html(html);

					//绑定事件
					$('a[method]').query(function(json){
						if (json.result == 'success')
						{
							if (this.is('[name="compare"]'))
							{
								$('#file1').text(json.data.file);
								$('#content1').html(json.data.diff);
								$('#content2').html(json.data.local.toHTML());
								$('#content3').html(json.data.remote.toHTML());

								$('.nav-tabs a:first', '#myModal1').tab('show');
								$('#readme1').prop('checked',false).triggerHandler("click");
								$('#myModal1').modal({keyboard: false, show: true});
							}
						}
						else
							$.showtips(json);
						
					},false);
					$('#checkAll').checkAll('table :checkbox', function(){
						this.each(function(){$(this).closest('tr').removeClass('bg-success').addClass($(this).prop("checked") ? 'bg-success' : '');
						});
					});//全选
					$('tr:not(.bg-info)').on('click',function(e){
						if (['INPUT','A','BUTTON'].indexOf(e.target.tagName) > -1) return true;
						var $obj = $(':checkbox', this);
						$obj.prop('checked', !$obj.prop('checked'));
						$(this).removeClass('bg-success').addClass($obj.prop("checked") ? 'bg-success' : '');
					});
				} else {
					$.showtips(json);
				}
				
		},false);
	});
})(jQuery);
</script>
</body>
</html>